<template>
  <div id="home">
     <div class="swiper-container slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for=" item in lunbolist">
                <a :href="item.url">
                    <img  :src="item.imageUrl"/>
                </a>
            </div>
        </div>                              
    </div>
</div>


</template>
<script>
import $ from 'jquery'
import swiper from 'swiper'

export default {
  name:'home',
  data:function(){
    return {
        lunbolist:[]
    }
  },
  mounted:function(){
      var url ='http://localhost:3000/lunbo?time=' + new Date().getTime();
      console.log(url);
   var that = this;
  $.get(url).then(function(res){
      that.lunbolist = res.data.billboards;
      console.log(that.lunbolist);
      that.$nextTick(function() {
 	var mySwiper = new Swiper('.swiper-container',{
      loop: true,
      autoplay: 3000
        }) 
      })      
    })
  }
}
</script>
<style>
#home{
    margin-top: 50px;
}
.swiper-container { height: 210px;zoom: 1;}
.swiper-container img { width: 100%;height: 100%; }

</style>